<template>
<div>
 <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card" style="width:100%">
      <!-- 搜索和操作用户区域 -->
      <div style="margin-top: 15px;">
        <el-row :gutter="24">
          <el-col :span="9">
            <el-input clearable @clear="getGoodsList" v-model="queryData.query" placeholder="请输入内容"  class="input-with-select">
              <el-button @click="getGoodsList" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <!-- 添加用户 -->
          <el-col :span="3">
          <el-button type="primary" @click="addGoods">添加用户</el-button>
          </el-col>
        </el-row>
     </div>

     <!-- 数据表格区域 -->
     <el-table
     border
     stripe
     :data="goods"
     style="width: 100%">
       <el-table-column type="index" label="#" width="80"></el-table-column>
       <el-table-column prop="goods_name" label="商品名称" width="600"></el-table-column>
       <el-table-column prop="goods_price" label="价格(元)" width="80"></el-table-column>
       <el-table-column prop="goods_weight" label="重量" width="80"></el-table-column>
       <el-table-column label="创建时间" width="150">
         <template slot-scope="scope">
           {{ scope.row.add_time | dateFormat}}
         </template>
       </el-table-column>
       <el-table-column label="操作" width="180">
         <template slot-scope="scope">
           <!-- 编辑 -->
           <el-button type="primary" icon="el-icon-edit" @click="editGoods"></el-button>
           <!-- 删除 -->
           <el-button @click="deleteGoods(scope.row.goods_id)" type="danger" icon="el-icon-delete"></el-button>
         </template>
       </el-table-column>
     </el-table>

    <!-- 分页区域 -->
    <el-pagination
      @size-change="goodsListSizeChange"
      @current-change="goodsListCurrentChange"
      :current-page=queryData.pagenum
      :page-sizes="[2, 4, 6, 10]"
      :page-size=queryData.pagesiz
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>

    <!-- 编辑弹出框 -->
    <el-dialog title="提示" :visible.sync="goodsDialogVisible" width="30%">
       <!-- 编辑表单 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="goodsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="goodsDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
</div>
</template>

<script>
export default {
  data () {
    return {
      goods: [],
      queryData: {
        query: '',
        pagesize: 10,
        pagenum: 1
      },
      total: 0,
      goodsDialogVisible: false

    }
  },

  created () {
    this.getGoodsList()
  },

  methods: {
  // 获取用户列表数据
    async getGoodsList () {
      const { data: res } = await this.$axios.get('goods', {
        params: this.queryData
      })
      if (res.meta.status !== 200) return this.$message(res.meta.msg)
      // this.$message(res.meta.msg)
      this.goods = res.data.goods
      this.total = res.data.total
      // console.log(this.usersList)
    },
    // 每页条数变化时
    goodsListSizeChange (val) {
      this.queryData.pagesize = val
      this.getUsersList()
    },
    // 页码变化时
    goodsListCurrentChange (val) {
      this.queryData.pagenum = val
      this.getUsersList()
    },
    // 编辑按钮
    editGoods () {
      this.goodsDialogVisible = true
    },
    // 删除按钮
    deleteGoods (id) {
      this.$confirm('删除该商品，是否继续', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '保存',
        cancelButtonText: '放弃修改'
      })
        .then(async () => {
          const { data: res } = await this.$axios.delete(`goods/${id}`)
          if (res.meta.status !== 200) return this.$message('获取数据失败')
          this.getGoodsList()
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃保存并离开页面'
              : '停留在当前页面'
          })
        })
    },
    // 添加按钮
    addGoods () {
      this.$router.push('/add/goods/')
    }
  }
}
</script>

<style scoped lang='less'>

</style>
